<template>
	<view class="flex flex-col just-spa-bet ali-cen">
		<!-- 列表条 -->
		<view class="card flex ali-cen just-spa-bet mb20 wid1p fo-white relative" v-for="(i,j) in data_list" :key='j' style="height: 70px;"
		 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target='j'>
			<view class="card-left flex flex-col over-one-line">
				<text class="title font-wei600 over-one-line">{{i.title}}</text>
				<text class="times mt20 over-one-line">{{Compute_times(i.times)}}</text>
			</view>
			<view class="card-right fo-40 transition-1 right-center mr20" @click="onRecord(i.LocalId)" v-show="listTouchDirection==='right'">
				记录
			</view>
			<!-- 可滑动隐藏的按钮 -->
			<view class="move flex transition-1 fo-40 ali-cen hei-inh transform-X-130" style="width: 130px;" :class="{'transform-X-0':(listTouchDirection==='left' &&CurTouch==j) }">
				<view class="bg-grey flex1 text-center hei-inh flex ali-cen just-cent" @click.stop="onTop">置顶</view>
				<view class="bg-red flex1 text-center hei-inh flex ali-cen just-cent" @click.stop="onDel(i.LocalId)">删除</view>
			</view>
		</view>
		<!-- 弹出层--完成任务 -->
		<u-popup v-model="popupShow" mode="center" border-radius="14" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.3)'}"
		 width="80%">
			<view class="pop-head flex just-spa-bet fo-white fo-40">
				<view class=" ">完成任务</view>
				<view class="flex ali-cen">
					<text class="cuIcon-check mr20" @click="AddPlane"></text>
					<text class="cuIcon-close" @click="ClosePopup"></text>
				</view>
			</view>
			<view class="popup padd20 fo-black">
				<u-form :model="form" ref="uForm" label-position='left'>
					<u-form-item label="专注时间" label-width="160">
						<u-input :value="Compute_StudyTime" type="select" placeholder="选择花费的时间" @click='TimeSelectshow=true' />

					</u-form-item>
				</u-form>
				<!-- <view style="height: 200px;"></view> -->
			</view>
		</u-popup>
		<!-- 弹出层--拟态框 -->
		<YModal :YModalShow.sync='YModalShow' title='提示' :content='YModalTxt' @SubmitOk='YModal_SubmitOk'></YModal>
		<!-- 时间选择器 -->
		<u-select v-model="TimeSelectshow" mode="mutil-column" :list="TimeSelect" @confirm="TimeSelectComfirm"></u-select>
	</view>
</template>

<script>
	import YModal from '@/common/components/Y-showModel/index.vue'
	import {
		API$DelStyudyPlaneData
	} from '@/common/API/StudyPlane.js'
	
	let X_OR_Y_MOVE = null;  // 上下滑动和左右滑动
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		components: {
			YModal
		},
		name: "",
		computed: {
			Compute_times() {
				return function(e) {
					let str = e.toString().split('.')
					return `共花费：${str[0]}天 ${str[1]}小时 ${str[2]}分钟`
				}
			},
			Compute_StudyTime() {
				return this.form.StudyTime.split('.')[0] + '小时' + this.form.StudyTime.split('.')[1] + '分钟'
			}
		},
		watch: {
			list: {
				handler(newQuestion, oldQuestion) {
					this.data_list = newQuestion
				},
				immediate: true
			},
			YModalShow() {
				if (!this.YModalShow) {
					this.CurTouch = null
					this.listTouchDirection = 'right'
					this.OperateId = null;
					this.form.StudyTime = '0.0'
				}
			},
			popupShow() {
				if (!this.popupShow) {
					this.CurTouch = null
					this.listTouchDirection = 'right'
					this.OperateId = null;
					this.form.StudyTime = '0.0'
				}
			}

		},
		created() {
			this.addTimeSelPickeData()
		},
		data() {
			return {
				data_list: [], // 接口数据
				popupShow: false, //记录弹出层
				TimeSelectshow: false, // 时间列表选择器
				form: {
					StudyTime: "0.0", // 学习时间
				},
				TimeSelect: [], // 时间选择器数据

				listTouchStartX: '', // 列表左滑开始距离
				listTouchStartY: '', // 列表左滑开始距离
				listTouchDirection: 'right', // 判断是左滑还是右滑
				CurTouch: '', //当前选中的遍历数组下标

				YModalShow: false, // 拟态框是否显示
				YModalTxt: '删除该计划会清空之前的数据(可以选择添加进归档)，是否删除该计划？', // 拟态框提示内容
				OperateId: '' // 要被操作的计划id
			}
		},
		methods: {
			// 添加时间选择器的数据
			addTimeSelPickeData() {
				let arr1 = [],
					arr2 = [];
				for (let i = 0; i <= 24; i++) {
					arr1.push({
						value: i,
						label: `${i}小时`
					})
				}
				for (let i = 0; i < 60; i++) {
					arr2.push({
						value: 24 + i,
						label: `${i}分种`
					})
				}
				this.TimeSelect.push(arr1, arr2)
			},
			// 时间选择器确认按钮
			TimeSelectComfirm(e) {
				this.form.StudyTime = e[0].value + '.' + (e[1].value - 24)
			},
			// 记录按钮
			onRecord(e) {
				this.popupShow = true;
				this.OperateId = e
			},
			// 关闭弹窗
			ClosePopup() {
				this.popupShow = false
			},
			// 添加记录
			AddPlane() {
				if (this.form.StudyTime === '0.0') return this.$pub.Toast('专注时间不能为空')
				let StudyPlaneData = this.$pub.getStorageSync('StudyPlane');

				StudyPlaneData.forEach(i => {
					if (i.LocalId === this.OperateId) {
						let FatherArr = [0, 0, 0]; // 拿天/小时/分钟 转数字
						i.Child.push({
							LocalId: this.$tool.create_timeName(),
							StudyTime: this.form.StudyTime,
							OpearteTime: new Date().getTime()
						})
						i.Child.forEach(i => {
							let ChildArr = i.StudyTime.split('.').map(Number);
							FatherArr[1] = FatherArr[1] + ChildArr[0];
							FatherArr[2] = FatherArr[2] + ChildArr[1];
						})

						// 分钟进时钟  --  时钟进天数
						FatherArr[1] = FatherArr[1] + Math.floor(FatherArr[2] / 60);
						FatherArr[2] = FatherArr[2] % 60
						FatherArr[0] = FatherArr[0] + Math.floor(FatherArr[1] / 24)
						FatherArr[1] = FatherArr[1] % 24

						i.times = FatherArr.join('.') // 改变目标总数赋值
					}
				})

				this.$pub.setStorageSync('StudyPlane', StudyPlaneData);
				// this.$parent.$parent.initLocalData()
				uni.$emit('StudyPlane', {
					type: "Call_initLocalData"
				})
				this.popupShow = false
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				if (X_OR_Y_MOVE === '上下滑动') return;
				this.CurTouch = e.currentTarget.dataset.target
				this.listTouchStartX = e.touches[0].pageX
				this.listTouchStartY = e.touches[0].pageY
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				if (X_OR_Y_MOVE === '上下滑动') return;
				let slideX_distance = Math.abs(e.touches[0].pageX - this.listTouchStartX);
				let slideY_distance = Math.abs(e.touches[0].pageY - this.listTouchStartY);
				slideY_distance > slideX_distance? (X_OR_Y_MOVE = '上下滑动') : (X_OR_Y_MOVE = '左右滑动');
				// console.log(slideX_distance,slideY_distance,X_OR_Y_MOVE	)
				// right 是隐藏 left是显示
				if(slideX_distance > slideY_distance && slideX_distance>150 && (e.touches[0].clientX - this.listTouchStartX)<0){
					this.listTouchDirection = 'left'
				}else{
					this.listTouchDirection = 'right'
				}
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				// if (this.listTouchDirection == 'left') {} else {
				// 	this.listTouchDirection = 'right'
				// }
				X_OR_Y_MOVE = null
				this.listTouchStartX =null
				this.listTouchStartY =null
			},
			// 置顶计划
			onTop() {
				this.$pub.Toast('置顶成功~')
				this.listTouchDirection = 'right'
			},
			// 删除计划
			onDel(e) {
				this.OperateId = e;
				this.YModalShow = true
			},
			// 拟态框确定按钮
			async YModal_SubmitOk(e) {
				let StudyPlaneData = this.$pub.getStorageSync('StudyPlane');
				let Index = StudyPlaneData.findIndex(i => i.LocalId === this.OperateId);
				StudyPlaneData.splice(Index, 1)
				this.$pub.setStorageSync('StudyPlane', StudyPlaneData);
				uni.$emit('StudyPlane', {
					type: "Call_initLocalData"
				})
				// todo  联网的时候要执行
				let {
					code,
					msg
				} = await API$DelStyudyPlaneData({
					LocalId: this.OperateId
				})
				if (code === 200) {
					this.$pub.Toast('云端数据' + msg)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.card {
		border-radius: 10rpx;
		background-color: skyblue;
		padding: 20rpx 0 20rpx 20rpx;
		overflow: hidden;
		transition: all 1s;

		.card-left {
			max-width: 80%;

			.title {
				font-size: 30rpx;
				padding: 0;
			}
		}
	}

	/* 弹窗部分 */
	.pop-head {
		padding: 20rpx 20rpx;
		background-color: skyblue;
		border-radius: 10rpx 10rpx 0 0;
	}

	// 列表左滑
	.transform-X-120 {
		transform: translateX(120px);
	}

	.transform-X-130 {
		transform: translateX(130px);
	}

	.transform-X-0 {
		transform: translateX(0px);
	}
</style>
